<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>插槽</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
<div id="app">
	<component-a>
		<p>html中文网</p>
	</component-a>
	<hr>
	<component-b>
		<p>没有取名字的，默认就是name="default"，或省略9</p>
		<template v-slot:site>
			<p>HTML中文网</p>
		</template>
		<template v-slot:domain>
			<p>www.html.cn</p>
		</template>
		<template v-slot:desc>
			<p>专业、实用、为技能而生。</p>
		</template>
	</component-b>
</div>

</body>
<script>
const app = Vue.createApp({
});

//全局组件：匿名插槽 / 单插槽
app.component('component-a', {
	// 插槽就是一个预留的占位符，最终会被组件中的指定的内容所替换
	// 插槽可以是代码复用，但不建议多个插槽直接使用，建议使用“具名插槽”
	template: `
		<div>
			<slot></slot>
			<slot></slot>
			<slot></slot>
		</div>
	`,
});

app.component('component-b', {
	template: `
		<div>
			<slot name="site"></slot>
			
			<slot name="desc"></slot>
			
			<slot name="domain"></slot>
			<slot name="desc"></slot>
			<slot></slot>
			<slot name="default"></slot>
			<slot name="null">找不到v-slot:null，就显示“备用内容”</slot>
		</div>
	`,
});

let vm1 = app.mount('#app');
console.log(vm1.$slots);
</script>
</html>